<template>
  <xhh-form
    v-model="form"
    :schema="schema"
    inline-message
    label-position="right"
    label-width="130px"
  >
    <template #divide1>
      <el-divider />
    </template>
  </xhh-form>
  <el-button @click="handleClick">获取</el-button>
</template>
<script lang="ts" setup>
import { h, ref } from 'vue'
import { ElCol, ElInput, ElRow, ElTooltip } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'

const form: any = ref({})
const schema = ref([
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'birthday',
    label: '出生日期',
    comp: 'el-date-picker',
  },
  {
    prop: 'idNo',
    label: '身份证号码',
  },
  {
    prop: 'divide1',
    label: '分割线',
    comp: 'slot',
    props: {
      noData: true,
      noFormItem: true,
    },
  },
  {
    prop: 'extend',
    label: '扩展数据',
    props: {
      withTips:
        '该字段为json字符串，例如：{"body": "perfect", "hair": "perfect"}。body表示身材，hair表示发型',
    },
  },
  {
    prop: 'agree',
    label: '',
    comp: 'el-checkbox',
    props: {
      class: 'basic-agree-checkbox',
      checkboxLabelIsOut: true,
      checkboxLabel: '同意',
      checkboxLabelRender: () => {
        // return (<span>同意<a onClick="">《无偿器官捐赠协议》</a></span>)
        return h('span', [
          h('span', ['同意']),
          h(
            'a',
            {
              class: 'agree-protocol',
              onClick: (e) => {
                e.stopPropagation()
                console.log('clickAgree')
              },
            },
            ['《无偿器官捐赠协议》']
          ),
        ])
      },
    },
  },
])
function handleClick() {
  console.log('form.value:', form.value)
}
</script>
<style lang="scss">
.basic-agree-checkbox.el-checkbox {
  margin-right: 10px;
}
</style>
